<template>
  <div class="progress" v-loading="loading">
    <div class="step-title" v-if="stepProgress.mailNo">{{ stepProgress.expTextName }}{{ stepProgress.mailNo }}</div>
    <div class="step-list" v-loading="loading">
      <template v-if="stepProgress.records && stepProgress.records.length > 0">
        <ul>
          <li v-for="(item, index) in stepProgress.records" :key="index" v-bind:class="[{fontBold:item.resultFlag===1||item.resultFlag===3||item.pass==='finish'}]" >
            <div class="step-time" v-if="type === 'shenheStep'" :alt="item.title" :title="item.title">{{ item.title }}</div>
            <div class="step-time" v-else>
              <p>{{ item.changeTime }}</p>
              <p style="overflow: inherit">{{ item.year }}</p>
            </div>
            <div v-bind:class="[{'success-pass' : item.pass}, {'danger-spot' : item.resultFlag === 3},'step-content']" v-if="type === 'shenheStep'">
              <div class="reviewer">
                <span v-if="item.pass === 'finish'">审核完成</span>
                <span v-else>{{index ===0 ? '提交审核人' : '审核人'}}：{{ item.userName }}</span>
  <!--              <span>(-1提交；0未开始；1进行中；2通过；3驳回；4取消/关闭；5跳过)</span>-->
                <b v-if="item.pass === 'finish'"></b>
                <span v-else-if="item.resultFlag === 0" class="info">未开始</span>
                <span v-else-if="item.resultFlag === 1" class="info">进行中</span>
                <span v-else-if="item.resultFlag === 2" class="success">已通过</span>
                <span v-else-if="item.resultFlag === 3" class="danger">驳回</span>
                <span v-else-if="item.resultFlag === 4" class="fail">取消/关闭</span>
                <span v-else-if="item.resultFlag === 5" class="info">跳过</span>
                <span v-else-if="item.resultFlag === -1" class="success">已提交</span>
                <span v-else class="hide-content"></span>
              </div>
              <div v-if="item.resultFlag === 3">驳回原因：{{ item.reason ? item.reason : '无' }}</div>
              <div v-if="item.pass">{{index ===0 ? '提交时间' : '审核时间'}}：{{ item.createdTime }}</div>
            </div>
            <div class="step-content" v-else>
              <p>{{item.context}}</p>
            <!-- <p>{{item.time}}</p>-->
            </div>
          </li>
        </ul>
      </template>
      <template v-else>
        <h5 >{{stepProgress.msg || stepProgress.message}}</h5>
      </template>
    </div>
  </div>
</template>

<script>
// import Vue from 'vue'
// Vue.forceUpdate()
export default {
  name: 'step-progress',
  data () {
    return {
      loading: false,
      stepProgress: {}
    }
  },
  props: {
    // 传递步骤参数
    // stepProgress: {
    //   type: Object,
    //   default: {}
    // },
    // 物流类型：1客服订单 service ，2售后订单 after
    type: { // 1.值为 shenheStep 查询审核流程  ，值为字符型数字为。物流类型：1.客服订单 ，2售后订单
      type: String,
      default: ''
    },
    source: { // 来源 用来判断 是客服订单还是售后订单  after
      type: String,
      default: ''
    },
    funcCode: { // 1为物流或客服，2为售后
      type: String,
      default: ''
    },
    orderObj: { // 订单
      type: Object,
      default: () => ({})
    },
    processFunc: { // 字典值
      type: Array,
      default: () => []
    }
  },
  watch: {
    orderObj (val, oldVal) {
      console.log(val)
      this.$forceUpdate()
      // debugger
      console.log('orderObj', val, oldVal)
      if (this.type === 'shenheStep') {
        const orderNo = val.orderNo ? val.orderNo : val.afterNo
        console.log('查询审批结果-orderNo', orderNo)
        this.getProcessGetHistory(orderNo) // 查询审批结果
      } else {
        console.log(this.type)
        this.getLogisticsInfo(val)
      }
    }
  },
  created () {},
  mounted () {
    this.$nextTick(() => {
      const orderObj = this.orderObj
      const orderNo = orderObj.orderNo ? orderObj.orderNo : orderObj.afterNo
      // console.log(orderObj, orderNo)
      if (this.type === 'shenheStep') {
        this.getProcessGetHistory(orderNo)
      } else {
        // console.log(this.type, 'this.type')
        this.getLogisticsInfo(this.orderObj)
      }
      setTimeout(() => {
        // console.log(orderObj, orderNo)
      }, 1000)
      this.$forceUpdate()
    })
  },
  methods: {
    // 查询审批结果
    getProcessGetHistory (busId) {
      this.loading = true
      this.stepProgress = {}
      const params = { funcCode: 1, busId }
      const processFunc = this.processFunc
      // console.log(this.source)
      if(processFunc){
        params.funcCode = this.source !== 'after' ? processFunc[0].dictId : processFunc[1].dictId
      }
      this.$api.processGetHistory(params).then((res) => {
        if (res.code === 0) {
          let rejectIndex = 10000
          res.data.records.forEach((item, index) => {
            // -1提交；0未开始；1进行中；2通过；3驳回；4取消/关闭；5跳过
            // if (item.resultFlag === -1 || item.resultFlag === 2 || item.resultFlag === 3 || item.resultFlag === 4) {
            if (item.resultFlag === -1 || item.resultFlag === 2 || item.resultFlag === 3 || item.resultFlag === 4) {
              item.pass = true
              if (item.resultFlag === 3) {
                rejectIndex = index
              }
            }
            if (index > rejectIndex) {
              item.resultFlag = 100
              console.log(item.resultFlag)
            }
          })
          this.stepProgress = res.data
          if (res.data.records[res.data.records.length - 1].resultFlag === 2) {
            const obj = Object.assign({}, res.data.records[res.data.records.length - 1])
            obj.pass = 'finish'
            obj.title = '审核完成'
            this.stepProgress.records.push(obj)
          }
          console.log(this.stepProgress.records)
        } else {
          console.log('请求流程失败')
        }
        this.loading = false
      }).catch((err) => {
        this.stepProgress = {}
        console.log(err)
        this.loading = false
      })
    },
    // 物流查询
    getLogisticsInfo (obj) {
      this.loading = true
      console.log(this.type)
      this.stepProgress = {}
      let logisticsType = 2
      if (this.type === 'logisticsMessageOne') { logisticsType = 1 }
      const params = { id:obj.orderId, logisticsType } // logisticsType 	物流类型：1客服订单 ，2售后订单
      if(this.source === 'after'){params.id = obj.id }
      this.$api.getLogisticsInfo(params).then((res) => {
        this.stepProgress = res.data
        // console.log(res.data)
        if(res.data){
          res.data.data.forEach(item => {
            item.year = item.time.substring(0, 10)
            item.changeTime = item.time.substring(11)
            console.log(item)
          })
          this.stepProgress.records = res.data.data
        }else{
          // console.log(res.message)
          this.stepProgress = res
        }
        // console.log(this.stepProgress)
        this.loading = false
      }).catch((err) => {
        this.stepProgress = {}
        console.log(err)
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.line-clamp{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;      /* 可以显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical;
}
.step-list:after, .step-list ul li:after {
  clear: both;
  display: table;
  content: '';
}
.step-title{
  font-size: 16px;
  font-weight: bold;
  color: #4168E7;
  padding-left: 145px;
  margin-bottom: 20px;
}
.step-list{
  ul{
    li{
      font-size: 14px;
      line-height: 160%;
      .step-time,.step-content{float: left;}
      .step-time{
        text-align: right;
        margin-right: 20px;
        width: 100px;
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;      /* 可以显示的行数，超出部分用...表示*/
        -webkit-box-orient: vertical;
      }
      .step-content{
        width: calc( 100% - 145px);
        border-left: 3px solid #f8f8f8;
        padding: 0 0 35px 20px;
        position: relative;
        //text-indent: 16px;
        &:before{
          content: '';
          border: 3px solid #f3f3f3;
          background-color: #d9d9d9;
          display: inline-block;
          width: 5px;
          height: 5px;
          border-radius: 5px;
          position: absolute;
          top: -1px;
          left: -6px;
        }
        .reviewer{
          span{
            &:nth-child(2){
              float: right;
              width: 54px;
              height: 24px;
              background-color: rgba(18, 171, 98, 0.1);
              color: #12AB62;
              border-radius: 4px;
              text-align: center;
              font-size: 14px;
              font-weight: inherit;
            }
          }
          span.success{

          }
          span.info{
            color: #ffffff;
            background-color: rgba(204, 204, 204, 1) ;
          }
          span.fail,span.danger{
            color: #F33F3F;
            background-color: rgba(243, 63, 63, 0.1);
          }
        }
      }
      &:last-child .step-content{
        border-left: none;
        &:before{
          left: -5px;
        }
      }
      &:last-child .success-pass{
        &:before{
          left: -4px;
        }
      }
    }
    li.current-active{
      font-weight: bold;
      font-size: 16px;
      //color: #2D7EDF;
      .step-content{
        &:before{
          border: 3px solid #bdd5ff;
          background-color: #2D7EDF;
        }
      }
    }
    .current-active ~ li {
      color: #cccccc;
      .step-content{
        .reviewer{
          span{
            &:nth-child(2){
              color: #FFFFFF;
              background-color: #CCCCCC;
              &:before{
                content: '待审批';
              }
            }
          }
        }
      }
    }
  }
  h5{
    text-align: center;
    margin: 0 auto 10px auto;
  }
}
/*
.step-list{
  ul{
    li{
      &:nth-child(1n+2) .step-content:before{
        left: -5px;
      }
    }
  }
}
*/

$pass-color: #2D7EDF;
.success-pass{
  border-left: 2px solid $pass-color!important;
}
.step-list ul li:last-child .success-pass {
  border-left:none!important;
}
.step-list{
  ul{
    li{
      .success-pass:before{
        background-color: $pass-color;
        border: 2px solid $pass-color!important;
      }
      &:nth-child(1n+2) .success-pass:before{
        //border: 5px solid #3c763d!important;
      }
    }
  }
}
.step-list ul li .danger-spot:before{
  background-color: #F33F3F;
  border: 2px solid #F33F3F !important;
}
.fontBold{font-weight: bold;}
</style>
